import React, { Component } from 'react'
// 状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，
// 使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)
// 现阶段，定义状态只能在 类组件，因为函数式组件被称为 无状态组件
// 定义状态时两种不同的方式
// 1.使用类的属性定义  ----   极力推荐
// 2.使用类的构造函数定义 ---- 以前一直用
// 如何访问状态  this.state.状态名
// export default class componentName extends Component {
//   // 1. 使用类属性定义状态
//   state = {
//     count: 100
//   }
//   render() {
//     return (
//       <div>
//         次数： { this.state.count }
//       </div>
//     )
//   }
// }
export default class componentName extends Component {
  // 2.使用构造函数定义状态
  /**
   * 
   * 子类必须在constructor方法中调用super方法，否则新建实例时会报错。
   * 这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，
   * 得到与父类同样的实例属性和方法，然后再对其进行加工，
   * 加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
   * 
   * ES5 的继承，实质是先创造子类的实例对象this，
   * 然后再将父类的方法添加到this上面（Parent.apply(this)）。
   * ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，
   * 加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。
   */
  // constructor 也属于生命周期的钩子函数
  // 一般作用就是创建 状态，可以不写
  // 如果不去设置状态，一般情况下 constructor 即使写了，也会告诉你不需要
  constructor (props) {
    super(props)
    this.state = {
      count: 1000
    }
  }
  render() {
    return (
      <div>
        次数： { this.state.count }
      </div>
    )
  }
}
